<template>
	<view class="new">
		<view class="nav">
			<!-- 上半部分遮罩 -->
			<view @click="close" style="height: 370px;width: 100%;position: fixed;top: 0;">

			</view>
			<!-- 头部 -->
			<view class="top">
				<view style="display: flex;align-items: center;color: #333333;">
					<checkbox-group @change="Allchange">
						<label>
							<checkbox value="" :checked="checkedAll" /><text>全选</text>
						</label>
					</checkbox-group>
				</view>
				<view style="color: #AAAAAA;">
					清理购物袋
				</view>
			</view>

			<!-- 购物车数据内容 -->
			<view class="cont">
				<view class="item" v-for="(item,index) in shopData" :key="index">
					<checkbox-group @change="Change(item.checked,item.ifID)">
						<label>
							<checkbox value="" :checked="JSON.parse(item.checked)" />
						</label>
					</checkbox-group>
					<view style="display: flex;align-items: center;width: 200px;">
						<image :src="item.img" style="width: 60px;height: 60px;margin-right: 10px;"></image>
						<view>
							<view style="margin-bottom: 20px;">{{item.name}}</view>
							<view>{{item.price}}</view>
						</view>
					</view>
					<view style="width: 100px;">
						<view
							style="display: flex;align-items: center;width: 70px;justify-content: space-between;margin-top: 50px;margin-left: 20px;">
							<view style="width: 16px;height: 16px;background-color: #DBA871;color: white;
							display:flex;justify-content: center;align-items: center;border-radius: 100%;" @click="del(index)">-</view>
							<view>{{item.num}}</view>
							<view style="width: 16px;height: 16px;background-color: #DBA871;color: white;
							display:flex;justify-content: center;align-items: center;border-radius: 100%;" @click="add(index)">+</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 底部 -->
			<view class="bottom">
				<view class="" style="margin-left: 10px;">
					￥{{Zprice}}
				</view>
				<view class="btn" @click="Tiao">结算</view>
				<view class="car">
					<image src="../../static/购物袋(1).png" mode=""></image>
					<view style="position: absolute;right: -5px;top: 0;width: 18px;
				height: 18px;color: white;border-radius: 100%;background-color: #DBA871;
				text-align: center;line-height: 18px;">{{shopData.length}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['carFlag', 'shopList'],
		data() {
			return {
				Zprice: '',
				shopData: [],
				checkedAll: ''
			}
		},
		mounted() {
			this.Zprice = this.$store.getters['ordermeal/ZJ']
			this.shopData = this.$store.state.ordermeal.Shop
			this.checkedAll = this.shopData.every(item => JSON.parse(item.checked) === true)
		},
		methods: {
			close() {
				this.$emit('carClose', !this.carFlag)
				this.$emit('price', this.Zprice)
			},
			Allchange() {
				this.checkedAll = !this.checkedAll
				let res = this.shopData.map(item => {
					return [this.checkedAll, item.ifID]
				})
				console.log(res)
				this.$store.commit('ordermeal/checkedAll', res)
				setTimeout(() => {
					this.Zprice = this.$store.getters['ordermeal/ZJ']
					this.shopData = this.$store.state.ordermeal.Shop

				}, 200)
			},
			Change(checked, index) {
				console.log(JSON.parse(checked))
				this.$store.commit('ordermeal/Checked', {
					checked: !JSON.parse(checked),
					ifID: index
				})
				setTimeout(() => {
					this.Zprice = this.$store.getters['ordermeal/ZJ']
					this.shopData = this.$store.state.ordermeal.Shop
					this.checkedAll = this.$store.state.ordermeal.Shop.every(item => JSON.parse(item.checked) ===
						true)
				}, 100)
			},
			del(index) {
				this.$store.commit('ordermeal/delCar', index)
				setTimeout(() => {
					this.Zprice = this.$store.getters['ordermeal/ZJ']
					this.shopData = this.$store.state.ordermeal.Shop
				}, 100)
			},
			add(index) {
				this.$store.commit('ordermeal/addCar', index)
				setTimeout(() => {
					this.Zprice = this.$store.getters['ordermeal/ZJ']
					this.shopData = this.$store.state.ordermeal.Shop
				}, 100)
			},
			Tiao() {
				let data = this.shopData.filter(item => {
					return JSON.parse(item.checked)
				})
				uni.navigateTo({
					url: `./order?data=${encodeURIComponent(JSON.stringify(data))}`
				})
			}
		},
	}
</script>

<style scoped>
	.new {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}

	.nav {
		width: 100%;
		height: 250px;
		background-color: white;
		position: fixed;
		bottom: 0;
		left: 0;
		border-radius: 10px 10px 0 0;
	}

	.bottom {
		width: 100%;
		height: 50px;
		position: absolute;
		bottom: 0;
		background-color: #F2F2F2;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.bottom .btn {
		width: 100px;
		height: 50px;
		background-color: #DBA871;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.car {
		position: absolute;
		width: 50px;
		height: 50px;
		background-color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 100%;
		bottom: 260px;
		left: 15px;
		box-shadow: 1px 1px 10px 0px #999999;
	}

	.car image {
		width: 24px;
		height: 24px;
	}

	.top {
		height: 40px;
		border-bottom: 1px solid #E4E7ED;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		padding: 0 10px;
	}

	.cont {
		overflow-y: auto;
		height: 160px;
		font-size: 14px;
	}

	.cont .item {
		height: 90px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 10px;
	}
</style>
